<template>
    <div class="menu-item">
        <div class="body row">
            <div class="img">
                <img :src="item.img" alt="" />
            </div>
            <div class="content">
                <div class="title">{{ item.title }}</div>
                <div class="des">{{ item.des }}</div>
                <div class="price row">
                    <div class="price-pay">￥{{ productPrice }}</div>
                    <div class="actions row">
                        <div
                            class="btn btn-del"
                            v-if="count > 0"
                            @click="updateCount(count - 1)"
                        >
                            <img
                                src=""
                            />
                        </div>
                        <div class="count" v-if="count > 0">{{ count }}</div>
                        <div
                            class="btn btn-add"
                            @click="updateCount(count + 1)"
                        >
                            <img
                                src="https://s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:9096d347/40b1252b285172da0c8b7d88a2b46220.png"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        item: Object,
        categoryId: String,
        categoryName: String
    },
    data() {
        return {
            // count: 0
        };
    },
    computed: {
        productPrice() {
            return parseFloat(this.item.price) / 100.0;
        },
        count() {
            const cartList = this.$store.state.cartList;
            let res = 0;
            cartList.map(item => {
                if (item.productId === this.item.productId) {
                    res += 1;
                }
            });
            return res;
        }
    },
    methods: {
        updateCount(newCount) {
            newCount = newCount < 0 ? 0 : newCount;
            const item = {
                ...this.item,
                categoryId: this.categoryId,
                categoryName: this.categoryName
            };
            if (newCount > this.count) {
                this.$store.commit("addCart", {
                    item
                });
            }
            if (newCount < this.count) {
                this.$store.commit("delCart", {
                    item
                });
            }
            // this.count = newCount;
            console.log(this.$store.getters.cartMapList);
        }
    }
};
</script>


<style lang="less" scoped>
.menu-item {
    background: #fff;
    font-size: 26px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 30px;

    .body {
        .img {
            position: relative;
            width: 150px;
            height: 150px;
            overflow: hidden;
            margin-right: 30px;
            img {
                position: absolute;
                width: auto;
                height: 100%;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        .content {
            flex: 1 1 auto;
            .title {
                font-size: 30px;
                font-weight: bold;
                margin-bottom: 10px;
            }
            .des {
                margin-bottom: 20px;
            }
            .price {
                justify-content: space-between;
                color: #fb4e44;
                font-weight: 700;
                font-size: 30px;

                .actions {
                    align-items: center;
                    .btn {
                        width: 40px;
                        height: 40px;
                    }
                    .count {
                        height: 40px;
                        line-height: 40px;
                        padding: 0 15px;
                    }
                }
            }
        }
    }
}
</style>